﻿<template>
    <div v-cloak>
        <component is="style" />
        <div v-on:click="openData" class="color-999">
            <div v-if="!obj">{{placeholder}}</div>
            <div v-else :class="{'color-black-1':!disabled}" style="min-height:20px;">{{obj[text]}}</div>
        </div>
        <van-action-sheet v-model="show" round  :closeable="closeable" :close-on-click-overlay="closeOnClickOverlay" :title="title">
            <div class="flex-column">
                <div v-if="!!issearch">
                    <van-search v-model.trim="searchTxt" placeholder="请输入搜索关键词"></van-search>
                </div>
                <div class="flex-column-fill hidden-x">
                    <template v-for="item in data" :key="item[label]">
                        <div v-on:click="itemClick(item)" :style="{display:search(item)}">
                            <slot v-bind="item">
                                <van-cell :is-link="!disabledItem(item)" :clickable="!disabledItem(item)" :value-class="{'color-blue':value1==item[label], 'color-888':!!disabledItem(item)}">{{item[text]}}</van-cell>

                            </slot>

                        </div>

                    </template>

                </div>

            </div>

        </van-action-sheet>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'hxt.select',
            props: {
                placeholder: {
                    type: String,
                    'default': function () {
                        return '请选择...'
                    }
                },
                //是否禁用组件
                disabled: {
                    type: Boolean,
                    'default': function () {
                        return false
                    }
                },
                //弹出框标题
                title: {
                    type: String,
                    'default': function () {
                        return '请选择...'
                    }
                },
                //是否在点击遮罩层后关闭
                closeOnClickOverlay: {
                    type: Boolean,
                    default: function () {
                        return true;
                    }
                },
                //是否显示关闭图标
                closeable: {
                    type: Boolean,
                    default: function () {
                        return false;
                    }
                },
                value: {
                    type: Object,
                    'default': function () {
                        return null;
                    }
                },
                data: {
                    type: Array,
                    'default': function () {
                        return [];
                    }
                },
                //绑定值对应的属性名
                label: {
                    type: String,
                    'default': function () {
                        return '';
                    }
                },
                //显示值对应的属性名
                text: {
                    type: String,
                    'default': function () {
                        return '';
                    }
                },
                //禁用选项对应的属性名
                disprop: {
                    type: String,
                    'default': function () {
                        return '';
                    }
                },
                //是否开启搜索
                issearch: {
                    type: Boolean,
                    'default': function () {
                        return false;
                    }
                },
                //自定义搜索方法
                match: {
                    type: Function,
                    'default': null
                },
                //弹出框高度
                height: {
                    type: String,
                    'default': function () {
                        return '60%';
                    }
                },
            },
            data: function () {
                return {
                    show: false,
                    searchTxt: ''
                };
            },
            computed: {
                value1: {
                    get: function () {
                        return this.value;
                    },
                    set: function (val) {
                        this.$emit('input', val);
                    }
                },
                obj: function () {
                    var _this = this;
                    if (!_this.data || !hxt.isArray(_this.data) || _this.data.length == 0 || !_this.label) return null;
                    return _this.data.find(function (x) {
                        return x[_this.label] == _this.value1;
                    });
                }
            },
            watch: {
                show: function (val) {
                    this.searchTxt = '';
                }
            },
            activated: function () {

            },
            mounted: function () {
                //console.log(this.msg)
            },
            methods: {
                openData: function () {
                    var _this = this;
                    if (!!_this.disabled) return;
                    if (!_this.$listeners['load']) {
                        if (_this.data.length == 0) return hxt.error("列表为空");
                        _this.show = true;
                        return;
                    };
                    this.$emit('load', function (res) {
                        if (res.length == 0) return hxt.error("列表为空");
                        _this.show = true;
                        _this.data = res;
                    });
                },
                itemClick: function (item) {
                    var _this = this;
                    if (!!_this.disabledItem(item)) return;
                    _this.value1 = item[_this.label];
                    _this.show = false;
                    _this.$emit('change', item);
                },
                disabledItem: function (item) {
                    return !!this.disprop && !!item[this.disprop];
                },
                search: function (item) {
                    var _this = this;
                    if (!_this.issearch) return 'block';
                    //未输入
                    if (!_this.searchTxt) return 'block';
                    //传入搜索函数
                    if (hxt.isFunction(_this.match)) {
                        return !!_this.match(item, _this.searchTxt) ? 'block' : 'none';
                    }
                    var txt = ('' + item[_this.text]).toUpperCase(), str = _this.searchTxt.toUpperCase();
                    return txt.indexOf(str) > -1 || hxt.pinyin(txt).indexOf(str) > -1 ? 'block' : 'none';
                }
            },
            components: {

            }
        };
    })(window.$jscript.fn);
</script>
<style>
</style>